<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--

    Template 2092 Shelf

    http://www.tooplate.com/view/2092-shelf

    -->
    <title>SHELF - Your Online Bookstore</title>

    <!-- load stylesheets -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">                <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css">                                      <!-- Bootstrap style -->
    <link rel="stylesheet" href="css/tooplate-style.css">                                   <!-- Templatemo style -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container">
    <header class="tm-site-header" style="border-bottom: 10px solid #d2f1c7">
        <h1 class="tm-site-name">Shelf</h1>
        <p class="tm-site-description">Your Online Bookstore</p>

        <nav class="navbar navbar-expand-md tm-main-nav-container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#tmMainNav"
                    aria-controls="tmMainNav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse tm-main-nav" id="tmMainNav">
                <ul class="nav nav-fill tm-main-nav-ul">
                    <li class="nav-item"><a class="nav-link active filter-btn" data-filter="all"
                                            href="index.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link filter-btn" data-filter="flower" href="#">Catalogs</a></li>
                    <li class="nav-item"><a class="nav-link filter-btn" data-filter="plant" href="#">Awards</a></li>
                    <!--                            <li class="nav-item"><a class="nav-link" href="team.html">Our Team</a></li>-->
                    <!--                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>-->
                </ul>
            </div>
        </nav>

    </header>

    <div class="tm-main-content">
        <section class="tm-margin-b-l">
            <header>
                <h2 class="tm-main-title">Welcome to our bookstore</h2>
            </header>

            <p>Shelf HTML template is provided by Tooplate. Please tell your friends about it. Thank you. Images are
                from Unsplash website. In tincidunt metus sed justo tincidunt sollicitudin. Curabitur magna tellus,
                condimentum vitae consectetur id, elementum sit amet erat.</p>

            <div class="tm-gallery">
                <div class="row">
                    <figure id="img-1" data-filter="flower"
                            class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item    ">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-01.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>

                        <p class="tm-figcaption">Nam vitae odio</p>
                        </a>
                    </figure>
                    <figure id="img-2" data-filter="plant" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item ">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-02.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption text-size">Integer ornare</p>
                        </a>
                    </figure>
                    <figure id="img-3" data-filter="flower" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-03.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Cras non augue</p>
                        </a>
                    </figure>
                    <figure id="img-4" data-filter="flower" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-04.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Dolor lacus</p>
                        </a>
                    </figure>
                    <figure id="img-5" data-filter="plant" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-05.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Quisque velit</p>
                        </a>
                    </figure>
                    <figure id="img-6" data-filter="flower" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-06.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Suspendisse suscipit</p>
                        </a>
                    </figure>
                    <figure id="img-7" data-filter="plant" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-07.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Facilisis justo</p>
                        </a>
                    </figure>
                    <figure id="img-8" data-filter="flower" class="col-lg-3 col-md-4 col-sm-6 col-12 tm-gallery-item">
                        <!--                                <a href="preview.html">-->
                        <div class="tm-gallery-item-overlay">
                            <img src="img/image-08.jpg" style="height: 180px" alt="Image"
                                 class="img-fluid tm-img-center">
                        </div>
                        <p class="tm-figcaption">Vivamus facilisis</p>
                        </a>
                    </figure>
                </div>
            </div>

            <!--            <nav class="tm-gallery-nav">-->
            <!--                <ul class="nav justify-content-center">-->
            <!--                    <li class="nav-item"><a class="nav-link active" href="#">1</a></li>-->
            <!--                    <li class="nav-item"><a class="nav-link" href="#">2</a></li>-->
            <!--                    <li class="nav-item"><a class="nav-link" href="#">3</a></li>-->
            <!--                    <li class="nav-item"><a class="nav-link" href="#">4</a></li>-->
            <!--                </ul>-->
            <!--            </nav>-->
        </section>

        <section style="background-color: #fff;" class="media tm-highlight tm-highlight-w-icon">

            <div>
                <!--                <i class="fa tm-fa-6x fa-meetup"></i>-->
                <img src="./img/logo.jpg" height="100" alt="">
            </div>
            <div style="height: 100px;width: 100px; background-color: #d2f1c7; flex: 2">
                <p style="color: #000; text-indent: 20px">fefefefweofjmeo</p>
                <p style="color: #000;">fefefefweofjmeo</p>
            </div>

            <!--                    <div class="media-body">-->
            <!--                        <header>-->
            <!--                            <h2>Need Help?</h2>-->
            <!--                        </header>-->
            <!--                        <p class="tm-margin-b">Curabitur magna tellus, condimentum vitae consectetur id, elementum sit amet erat. Phasellus arcu leo, sagittis fringilla nisi et, pulvinar vestibulum mi. Maecenas mollis ullamcorper est at dignissim.</p>-->
            <!--                        <a href="" class="tm-white-bordered-btn">Live Chat</a>-->
            <!--                    </div>                    -->
        </section>
    </div>

    <footer>
        Copyright &copy; <span class="tm-current-year">2023</span> Monash University
        - Designed by <a href="https://www.facebook.com/tooplate" target="_parent">Shuyan Qiao</a>
    </footer>
    <div class="qg-audio">
        <audio src="The Promise.mp3" style="width: 260px;  transform: scale(1); " loop="true" autoplay="autoplay" controls="controls"
               preload="auto"></audio>
    </div>
</div>


<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script>         <!-- jQuery (https://jquery.com/download/) -->
<script src="js/popper.min.js"></script>                <!-- Popper (https://popper.js.org/) -->
<script src="js/bootstrap.min.js"></script>             <!-- Bootstrap (https://getbootstrap.com/) -->
<script>

    $(document).ready(function () {
        // Update the current year in copyright
        $('.tm-current-year').text(new Date().getFullYear());
    });

    let images = document.querySelectorAll('.tm-gallery-item img');
    for (let i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function () {
            let image = images[i];
            let container = document.createElement('div');
            container.style.position = 'fixed';
            container.style.top = '0';
            container.style.left = '0';
            container.style.width = '100%';
            container.style.height = '100%';
            container.style.background = 'rgba(0, 0, 0, 0.8)';
            container.style.display = 'flex';
            container.style.justifyContent = 'center';
            container.style.alignItems = 'center';
            container.style.zIndex = "100000"
            document.body.appendChild(container);
            let zoomed = document.createElement('img');
            zoomed.src = image.src;
            zoomed.style.maxHeight = '90%';
            zoomed.style.maxWidth = '90%';
            container.appendChild(zoomed);
            zoomed.addEventListener('click', function () {
                container.remove();
            });
        });
    }

    $(document).ready(function () {
        // 点击按钮时的事件处理程序
        $('.filter-btn').click(function () {
            var filterValue = $(this).data('filter'); // 获取按钮上的筛选值
            if (filterValue === 'all') {
                // 如果是 'all'，显示所有图片
                $('.tm-gallery-item').show();
            } else {
                // 否则，隐藏所有图片，然后显示与筛选值匹配的图片
                $('.tm-gallery-item').hide();
                $('.tm-gallery-item[data-filter="' + filterValue + '"]').show();
            }
        });
    });

   

</script>
</body>
<style>
    .qg-audio {
        position: fixed;
        top: 40vw;
        right: 5px;
        height: 100px;
        transform: scale(1);
    }

    .text-size {
        padding-top: 10px;
        font-family: Bahnschrift, serif;
    }

    .img-size {
        height: 180px;
    }

    .mask {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background: #000;
        opacity: .3;
        display: none
    }

    .sub {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px;
        color: #fff;
        font-size: 16px;
        line-height: 2;
        display: none
    }

    .txtShow .mask, .txtShow .sub {
        display: block;
    }


</style>
</html>
